<template>
	<scroll-view class="a-page" scroll-y="true" @scroll="handleScroll">
		
		<slot></slot>
		<view v-if="safe" :style="{ paddingBottom: safeHeight + 'px' }"></view>
		
		<!-- 顶部栏 -->
		<view class="bar" :style="{ height: barHeight + 'px', background: showBarBg }">
			<!-- 状态栏 -->
			<view class="bar-status" :style="{ height: statusBarHeight  +'px' }" ></view>
			<!-- 导航栏 -->
			<view class="barNav" :style="{ height: navBarHeight + 'px' }">
				<slot name="head">
					<!-- 返回按钮 -->
					<text class="barNavBack" v-if="isBack" :style="{ width: navBarHeight + 'px' }" @click="handleBack" >
						<text :style="{ borderColor: titleColor }"></text>
					</text>
					<!-- 标题 -->
					<view class="barNavTitle" :style="{ color: titleColor,width:`calc(100vw - (${capsuleWidth}px + 10px) * 2)` }"  >{{ title }}</view>
				</slot>
			</view>
		</view>
	</scroll-view>
</template>
<script>
	export default {
		name:'APageName',
		props: {
			
			// 底部安全距离
			safe: Boolean,
			
			//标题
			title:{
				type:String
			},
			//标题和返回按钮的颜色
			titleColor:{
				type:String,
				default:'#000'
			},
			barBackground:{
				type: String,
				default: '#5196ea'
			},
			//变动bar颜色的滚动距离
			offset:{
				type:Number,
				default:20//rpx
			}
		},
		data(){
			return {
				statusBarHeight:0,//状态栏高度
				navBarHeight:0,//导航栏高度
				barHeight:0,//整个栏高度
				capsuleWidth:0,//胶囊宽
				safeHeight:0,//底部安全距离
				
				scrollTop:0,//滚动距离
			}
		},
		computed:{
			isBack(){
				return getCurrentPages().length > 1;
			},
			showBarBg(){
				return this.offset <= this.scrollTop?this.barBackground:'transparent';
			}
		},
		methods:{
			handleBack(){
				this.$router.back()
			},
			handleScroll(e){
				this.scrollTop = e.detail.scrollTop;
			}
		},
		onReady() {
			const info = uni.getSystemInfoSync();
			this.statusBarHeight = info.statusBarHeight
			this.safeHeight = info.safeAreaInsets.bottom
			const rect = uni.getMenuButtonBoundingClientRect()
			this.capsuleWidth = rect.width
			this.navBarHeight = (rect.top - info.statusBarHeight) * 2 + rect.height;
			this.barHeight = rect.bottom + 16 / info.pixelRatio;
			
		}
	}
</script>

<style lang="scss" scoped>
	.a-page{
		height: 100vh;
		box-sizing: border-box;
		position: relative;
		.bar{
			position: fixed;
			top:0;
			left:0;
			display: block;
			width:100vw;
			flex-shrink: 0;
			background-color: #f8f8f8;
			transition: 0.1s;
			z-index: 100000000;
			.bar-status{
				// background-color: red;
			}
			.barNav{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				// background-color: blue;
				.barNavBack{
					position: absolute;
					display: flex;
					flex-shrink: 0;
					position: absolute;
					height: 100%;
					left: 0;
					top: 0;
					align-items: center;
					justify-content: center;
					z-index: 1;
					text{
						position: absolute;
						top:16px;
						left:20px;
						display: block;
						width: 21rpx;
						height: 21rpx;
						border-top:4rpx solid;
						border-left:4rpx solid;
						transform: rotate(-45deg);
					}
				}
				.barNavTitle{
					display: block;
					text-align: center;
					width:0;
					font-size: 32rpx;
					font-weight: 450;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
					white-space: nowrap;
				}
			}
		}
	}
</style>
<style>
	page{
		height: 100%;
		overflow: auto;
		background-color: #F3F5F9;
	}
</style>
